<template>
  <el-collapse v-model="activeNames2">
    <el-collapse-item
      v-for="(item, index) in form.config.option.series"
      :title="form.config.option.dataset.dimensions[index+1]"
      :name="form.config.option.dataset.dimensions[index+1]"
      :key="index"
    >
      <el-form-item>
        <template #label>
            <div style="display: flex;align-items: center;">
            <span>堆叠</span>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="设置相同的stack即可实现堆叠"
            placement="right"
          >
            <el-icon><InfoFilled /></el-icon>
          </el-tooltip>
        </div>
        </template>
        <el-input v-model="item.stack"></el-input>
      </el-form-item>
      <el-form-item label="线条颜色">
            <el-color-picker
            v-model="item.itemStyle.color"
          />
        </el-form-item>
      <el-form-item label="标记图形">
        <el-select v-model="item.symbol">
            <el-option
              v-for="item in configData.icons"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
      </el-form-item>
      <el-form-item label="标记大小">
          <el-slider
            v-model="item.symbolSize "
            :min="0"
            :max="10"
          />
        </el-form-item>
        <el-form-item label="平滑">
            <el-slider
            v-model="item.smooth "
            :min="0"
            :max="1"
            :step="0.1"
          />
        </el-form-item>
        <el-form-item label="阶梯曲线">
            <el-select v-model="item.step">
            <el-option
              v-for="item in configData.stepList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示面积">
            <el-switch v-model="item.areaVisible" @change="areaVisibleChange(item,$event)"></el-switch>
        </el-form-item>
        <el-form-item v-if="item.areaVisible" label="面积颜色">
            <el-color-picker
            v-model="item.areaStyle.color"
          />
        </el-form-item>
        <el-form-item label="是否显示标签">
        <el-switch v-model="item.label.show" />
      </el-form-item>
        <div v-if="item.label.show">
            <el-form-item label="标签位置">
                <el-select v-model="item.label.position">
            <el-option
              v-for="item in configData.positionList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
            </el-form-item>
            <el-form-item label="文字颜色">
            <el-color-picker
            v-model="item.label.color"
          />
          </el-form-item>
          <el-form-item label="文字大小">
          <el-slider
          style="margin-left:10px ;"
            v-model="item.label.fontSize"
            :min="10"
            :max="30"
            size="small"
          />
        </el-form-item>
        <el-form-item label="内容格式">
            <el-input
              v-model="item.label.formatter"
              type="textarea"
            />
          </el-form-item>
        </div>
    </el-collapse-item>
  </el-collapse>
</template>
<script setup>
import { ref, defineModel } from "vue";
import { deepClone } from "@/utils/arr.js";
import { InfoFilled } from "@element-plus/icons-vue";
const activeNames2 = ref();
const form = defineModel();
const props = defineProps({
  configData: { type: Array, default: [] },
});
const areaVisibleChange = (item,val) => {

  if (val) {
     item.areaStyle = {};
  } else {
      item.areaStyle = null
  }
};
</script>